<template>
  <!--  -->
  <view class="container">
    <view class="content">
        <imagesFile v-if="currentPage ===0" ></imagesFile>
        <textFile v-if="currentPage ===1"></textFile>
        <videoFile v-if="currentPage ===3"></videoFile>
        <musicFile v-if="currentPage ===4"></musicFile>
    </view>
    <view class="middle">
      <button class="red-btn add-btn" @click="handleOpen"> 
        <uni-icons type="plusempty" color="#ffffff" size="24"></uni-icons> 
      </button>
    </view>
    <!-- 新增-弹窗 -->
    <uni-popup class="file-popup" ref="popupRef" type="bottom" background-color="#fff">
      <view class="file-popup-content">
        <uni-forms :rules="formRules" mode="orderForm" label-align="center" class="file-popup-form">
          <uni-forms-item label="类型:" required>
            <uni-data-select 
              v-model="orderForm.type"
              :localdata="typeData"
              @change="handleTypeChange"
            >
            </uni-data-select>
          </uni-forms-item>
          <uni-forms-item label="图片:" required v-if="orderForm.type === 0">
            <uni-file-picker v-model="orderForm.imgValue"  name="img"
              file-mediatype="image"
              mode="grid"
              file-extname="png,jpg"
              :limit="1"
              @select="uploadSelectImg"
            ></uni-file-picker>
          </uni-forms-item>
          <uni-forms-item :label="labelName" v-else>
            	<uni-file-picker v-model="fileValue" 
                limit="1" 
                file-mediatype="all" 
                :file-extname="fileExtname"
                :list-styles="listFileStyles"
                @select="uploadSelectFile">
              </uni-file-picker>
          </uni-forms-item>
          <uni-forms-item label="标题:" required >
            <uni-easyinput type="text" v-model="orderForm.fileTitle" name="title" placeholder="添加标题" />
          </uni-forms-item>
          <uni-forms-item label="所属:" required v-if="orderForm.type === 1">
            <uni-data-picker placeholder="请选择" popup-title="请选择" :localdata="dataTree" v-model="orderForm.classes" @change="onchange" @nodeclick="onnodeclick"  @popupclosed="onpopupclosed">
            </uni-data-picker>
          </uni-forms-item>
          
          <button class="red-btn" @click="handlePublish"> 发布 </button>
        </uni-forms>
      </view>
    </uni-popup>
    <!-- 底部导航-tab组件 -->
    <view class="tab-bar">
      <customTabMeun 
        ref="tabBarRef"
        :current="currentPage" 
        :tabsItem="tabMeunData"
        @switchTabNav="changePageTab"
      ></customTabMeun>
    </view>
  </view>
</template>

<script setup>
  import { onBeforeUnmount, onMounted, ref } from "vue";
  import customTabMeun from "/components/custom-tab-bar/custom-tab-meun.vue"
  import imagesFile from "./images-file/images-file.vue"
  import textFile from "./text-file/text-file.vue"
  import videoFile from "./video-file/video-file.vue"
  import musicFile from "./music-file/music-file.vue"
  

  const tabBarRef = ref(null)
  const currentPage =  ref(4)
  const tabMeunData = ref([
    {
      text: "图片",
      iconPath: "images",
      selectedIconPath: "images-filled",
    }, {
      text: "文档",
      iconPath: "wallet",
      selectedIconPath: "wallet-filled",
    },  {
      text: "",
      iconPath: "plusempty",
      selectedIconPath: "plusempty",
    },  {
      text: "视频",
      iconPath: "videocam",
      selectedIconPath: "videocam-filled",
    },  {
      text: "音乐",
      iconPath: "headphones",
      selectedIconPath: "headphones",
    }
  ])
  
  const changePageTab = (val)=>{
    console.log('---',val);
    currentPage.value = val
  }
  
  // -----弹窗部分-----
  const popupRef = ref(null)  
  // 打开-弹窗
  const handleOpen = ()=>{
    orderForm.value = {
      type: 0,
      typeName: '',
      fileValue: {},
      fileData: {},
      imgValue: [],
      fileTitle: '',
      classes: ''
    }
    popupRef.value.open()
  }
  // ** 表单 **
  const orderForm = ref({
    type: 0,
    typeName: '',
    fileValue: {},
    fileData: {},
    imgValue: [],
    fileTitle: '',
    classes: ''
  })
  const formRules = ref({
    img: { rules: [{ required: true, errorMessage: '必填' }] },
    title: { rules: [ { required: true, errorMessage: '必填' } ] }
  })
  // ** 类型 **
  const typeData = ref([
    { value: 0, text: "图片" },
    { value: 1, text: "文档" },
    { value: 2, text: "视频" },
    { value: 3, text: "音乐" }
  ])
  const handleTypeChange = (val)=>{0
    orderForm.value.type = val
    orderForm.value.typeName = val == 0 ? '图片' : val == 1 ? '文档' : val == 2 ? '视频' : '音乐'
    labelName.value = val === 0 ? '图片' : val === 1 ? '文档' : val === 2 ? '视频' : '音乐'
    fileExtname.value = val === 0 ? 'png,jpg' : val === 1 ? 'docx,doc,xlsx,xls,pdf,txt' : val === 2 ? 'video' : 'music'
  }
  // ** 文档 **
  const labelName = ref('文档')
  const fileExtname = ref('docx,doc,xlsx,xls,pdf')
  const fileValue = ref({}) // 文档
  const listFileStyles = ref({
    border: false, // 是否显示边框
    dividline: false, // 是否显示分隔线
    borderStyle: {  // 线条样式
      width: 5,
      color: 'blue',
      radius: 10
    }
  })
  const uploadSelectFile = (files)=>{
    console.log('fffff==>',files);
    orderForm.value.fileData = files.tempFiles[0]
    orderForm.value.fileTitle = files.tempFiles[0].name
  }
  
  // ** 图片 **
  const imgValue = ref([])  // 图片
  const fileTitle = ref('')  // 标题

  // 上传选择
  const uploadSelectImg = (files)=>{
    console.log('Select==>',files);
    imgValue.value = files.tempFiles[0]
  }
  
  // ***文件类目***
  const dataTree = ref([
   { text: "市场部", value: "1",
      children: [
        { text: "市场组", value: "1-1" },
      ]
    },{ text: "技术部", value: "2",
      children: [
        { text: "研发组", value: "2-1" },
      ]
  },{ text: "人事部", value: "3",
      children: [
        { text: "薪资绩效", value: "3-1" },
      ]
  },{ text: "财务部", value: "4",
      children: [
        { text: "会计核算", value: "4-1" },
      ]
  },
  
  ]) 

  
  const onnodeclick = (e)=> {
    console.log('onnodeclick=>',e);
  }

  const onpopupclosed = (e)=>  {
    console.log('popupclosed',e);
  }
  
  const treeData = ref({})
  const onchange = (e)=>  {
    console.log('onchange:', e);
    treeData.value = e.detail.value
  }
  
  
  
  // ***发布***
  const handlePublish = async()=>{
    let data = {
      type: orderForm.value.type,
      typeName: orderForm.value.typeName,
      title: orderForm.value.fileTitle ,
      imageFiles: JSON.stringify(orderForm.value.imgValue), 
      imageUrl: orderForm.value.imgValue.url,
      treeData: JSON.stringify(treeData.value),
      treeValue: orderForm.value.classes,
      fileData: JSON.stringify(orderForm.value.fileData),
      fileUrl: orderForm.value.fileData.url,
      fileSize: orderForm.value.fileData.size
    }
    console.log('--提-->',data,'yyy--->', orderForm.value.fileData);
    // return
    const { data: res } = await uni.$http.post('/publishImages',data)
    if (res.success) {
      popupRef.value.close()
      // getImageData()  // 刷新信息
    } 
    uni.showToast({ title: res.msg, duration: 3000, icon:'none' }) 
  }
  
  
</script>

<style lang="scss">
  .container {
    position: relative;
    height: calc(800px - 160px);
    display: flex;
    flex-direction: column;
    
    .content {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;  /* 兼容移动端滚动 */
    }
    .tab-bar {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
    }
    .middle {
      position: fixed;
      bottom: 55px;
      left: 45%;
      z-index: 101;
      
      .add-btn {
        width: 40px;
        height: 35px;
        line-height: 35px;
      }
    }
    
    .file-popup{
      text-align: center;
      .file-popup-content{
        width: 95%;
        padding-top: 20px;
        padding-left: 5px;
        margin-bottom: 100px;
      }
    }
    .file-popup-form{
      width: 100%;
      background-color: pink;
    }
    
  }

</style>
